<!-- Dom模板 -->
<template>
  <div class="home_box">
    <!-- Dom内容 -->
    <div class="home_top">
      <ul>
        <li v-for="item in home.homeTopData" :key="item.id">
          <div><img :src="item.img" alt="" /></div>
          <div>
            <p>{{item.title}}</p>
            <p>{{item.num.length}}</p>
          </div>
        </li>
      </ul>
    </div>
    <div class="graph">
      <!-- 折线图 -->
      <div id="zxt" ref="main"></div>
      <div class="bt">
        <div class="home_order_statistics">
          <div class="top">
            <p>今日</p>
            <p>本月</p>
            <p>全部</p>
          </div>
          <p>订单统计</p>
          <ul>
            <li v-for="(item,index) in home.orderTj" :key="index">
              <p>{{item.title}}</p>
              <p>{{item.num}}</p>
            </li>
          </ul>
        </div>
         <!-- 饼图 -->
        <div id="btBox" ref="btBox"></div>
        <div class="progress">
          <!-- 进度条 -->
          <p class="score">店铺评分</p>
          <el-progress type="circle" :percentage="4.5" color="#000" :width=80></el-progress>
          <!-- 评分 -->
          <div>
            <el-rate v-model="value1" :colors="colors" show-text :texts="texts">></el-rate>
            <el-rate v-model="value2" :colors="colors" show-text :texts="texts">></el-rate>
            <el-rate v-model="value3" :colors="colors" show-text :texts="texts">></el-rate>
            <el-rate v-model="value4" :colors="colors" show-text :texts="texts">></el-rate>
            <el-rate v-model="value5" :colors="colors" show-text :texts="texts">></el-rate>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import a from './a'; // 引入组件
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from "echarts";
// 辅助函数
import { mapActions, mapState, mapMutations } from "vuex";
export default {
  name: "",
  data() {
    return {
      // 评分val
       value1: 5,
       value2: 4,
       value3: 3,
       value4: 2,
       value5: 1,
       texts:["2%","3%","5%","23%","67%"],
       colors:["#000000","#000000","#000000","#000000","#000000"]
    };
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {
    // 调用获取数据方法
    this.getOrderData();
  },
  components:{
  },
  // 计算属性
  computed: {
    ...mapState({
      home: "home",
    }),
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    setTimeout(() => {
      // 折线图
      this.filterZXTData(this.home.orderData)
      let chartDom = document.getElementById('zxt');
      let zstmyChart = echarts.init(chartDom);
      zstmyChart.setOption(this.home.options);
      // 饼图
      this.filterBtData(this.home.orderData)
      let btChartDom = document.getElementById('btBox');
      let btmyChart = echarts.init(btChartDom);
      btmyChart.setOption(this.home.btoptions);
    })

  },
  // Vue方法定义
  methods: {
    // action辅助函数
    ...mapActions({
      getOrderData: "home/getOrderData",
    }),
    // mutation辅助函数
    ...mapMutations({
      filterOrderData: "home/filterOrderData",
      filterZXTData:"home/filterZXTData",
      filterZXTData:"home/filterZXTData",
      filterBtData:"home/filterBtData"
    }),

  },
};
</script>

<style>
/* @import url(''); 引入css类 */
.home_box {
  padding: 30px 50px;
  padding-bottom:0;
  width: 100%;
  height: calc(100vh - 70px);
  display: flex;
  flex-direction: column;
  /* justify-content: center; */
}

/* home_top */
.home_top {
  width: 100%;
  height: 70px;
  margin-bottom: 20px;
}
.home_top ul {
  display: flex;
  height: 100%;
  width: 90%;
  justify-content: space-between;
}
.home_top ul li {
  display: flex;
  height: 100%;
  background: #fff;
  border-radius: 10px;
  width: 180px;
  padding-left: 10px;
  align-items: center;
  box-shadow: 1px 1px 10px #ccc;
}
.home_top ul li div img {
  width: 40px;
  height: 100%;
  margin-right: 10px;
}
.home_top ul li div p:nth-child(1) {
  font-size: 13px;
}
.home_top ul li div p:nth-child(2) {
  font-size: 20px;
}

/* graph */
.graph {
  width: 90%;
  height: calc(100% - 90px);
  box-sizing: border-box;
  overflow: hidden;
}
/* 自定义滚动条 */
.graph:hover {
  overflow-y: scroll;
}
.graph::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
.graph::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #ededed;
}
.graph::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  /* -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); */
  border-radius: 10px;
}
/* 折线图 */
#zxt {
  width: 100%;
  height: 450px;
  background: #fff;
  border-radius: 10px;
}
/* 饼图 */
.bt{
  width: 100%;
  height: 450px;
  background: #fff;
  border-radius: 10px;
  margin:20px 0;
  display: flex;
  justify-content: space-around;
}
.bt .home_order_statistics{
  flex:.2
}
.bt .home_order_statistics>.top{
  display:flex;
  justify-content: space-around;
  margin:20px 0;
  font-size:12px;
  color:#ccc;
}
.bt .home_order_statistics>p{
  text-align: center;
  font-size:13px
}
.home_order_statistics ul {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.home_order_statistics ul li {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 5px;
  width: 150px;
  justify-content: center;
  box-shadow: 1px 1px 10px #ccc;
  padding:15px 0;
  padding-left: 15px;
  margin-top:15px;
  margin-left:20px;
  font-size:12px;
  color:#777;
}
.home_order_statistics ul li p:nth-child(2){
  font-size:20px;
  padding-top:5px
}


.bt #btBox{
  flex:.6
}
/* 进度条和评分 */
.bt .progress{
  flex:.2;
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
/* 评分样式 */
.bt .progress .el-rate {
  margin:10px 0;
}
.bt .progress .el-rate .el-rate__item{
  margin-left:5px
}
.bt .progress .el-rate .el-rate__text{
  display: inline-block;
  width:50px;
  text-align: right;
}
.bt .progress .el-rate .el-rate__item .el-rate__icon{
  font-size:20px
}
.bt .progress .score{
  line-height: 50px;
  font-size:14px;
}


</style>